{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '下拉插件:example/select/index', '下拉树状菜单'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">下拉树状菜单 bootstrap-lyear-dropdowntree</div>
        </header>
        <div class="card-body">
        
          <p>下拉树状菜单插件实在太少，唯一找到的插件DropDownTree，也并不符合需求。所以这里自己弄了个简单的下拉树状菜单的插件，支持单选和多选。</p>
        <div class="mb-3">
          <label>选择栏目</label>
          <div class="lyear-dropdown-tree">
            <input type="text" class="form-control" value="" placeholder="请选择你要发布的栏目" data-bs-toggle="dropdown">
          </div>
        </div>
        <div class="mb-3">
          <button class="btn btn-default example-1">获取选中值的ID</button>
          <button class="btn btn-default example-2">获取选中值的文字</button>
        </div>
        <div class="mb-3">
          <pre id="consolebox"></pre>
        </div>
        <div class="mb-3">
          <p>初始化代码</p>
          <pre>var test = $('.lyear-dropdown-tree').lyearDropdownTree({
  data : data,                    // 树状结构数据
  multiSelect : true,             // 是否多选，默认true
  jsonStr : ',',                  // 数据分割符，默认','，例如获取选中数据会返回：1,2,3
  selectedData : [3017,3018],     // 当前已选中的数据，默认[]
  relationParent : true,          // 是否关联父类(主要用于多选)，默认true，设置为false，则选中父类，子类不会选中
  relationChildren : true,        // 是否关联子类(主要用于多选)，默认true，设置为false，则子类全部选中，父类不会选中
  
  checkHandler: function(el) {    // 回调
      console.log(el);
  },
});</pre>
        </div>
        <table class="table table-bordered">
          <tr>
            <th width="10%">方法名</th>
            <th>说明</th>
          </tr>
          <tr>
            <td>setSelectedItem</td>
            <td>设置选中项，如果是单选，则只设置最后一个为选中（可以在初始化时候指定选中项，也可以单独调用方法设定）</td>
          </tr>
          <tr>
            <td>getSelectedText</td>
            <td>获取选中项文字</td>
          </tr>
          <tr>
            <td>getSelectedID</td>
            <td>获取选中项ID</td>
          </tr>
        </table>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    var data = [
        {
          id: 1,
          title:"北京市",
          children: [
              {id: 101, title:"东城区"},
              {id: 102, title:"西城区"},
              {id: 103, title:"朝阳区"}
          ]
        },
        {
          id: 2,
          title:"天津市",
          children: [
              {id: 201, title:"和平区"},
              {id: 202, title:"河东区"},
              {id: 203, title:"河西区"}
          ]
        },
        {
          id: 3,
          title:"河北省",
          children: [
            {
                id: 301,
                title:"石家庄",
                children: [
                    {id:3011, title: '长安区'},
                    {id:3012, title: '桥西区'},
                    {id:3013, title: '新华区'},
                    {id:3014, title: '井陉矿区'},
                    {id:3015, title: '裕华区'},
                    {id:3016, title: '藁城区'},
                    {id:3017, title: '鹿泉区'},
                    {id:3018, title: '栾城区'},
                ]
            },
            {id: 302, title:"邯郸"},
            {id: 303, title:"保定"}
          ]
        }
    ];
    
    $(function (){
        var test = $('.lyear-dropdown-tree').lyearDropdownTree({
        data : data,
        multiSelect : false,
        jsonStr : ',',
        selectedData : [3017,3018],
        relationParent : true,
        relationChildren : true,
        
        checkHandler: function(el) {
            //console.log("checked ", el);
        },
    });
      
    $('.example-1').click(function() {
        if (test.getSelectedID().length == 0) {
            consolebox.append("你没有做出选择\n");
        } else {
           consolebox.append(test.getSelectedID()+"\n");
        }
    })
      
    $('.example-2').click(function() {
        if (test.getSelectedText().length == 0) {
            consolebox.append("你没有做出选择\n");
        } else {
           consolebox.append(test.getSelectedText()+"\n");
        }
    })
    })
    </script>